<!--
 * @Author: 白袂 1741866590@qq.com
 * @Date: 2023-09-13 19:43:25
 * @LastEditors: 白袂 1741866590@qq.com
 * @LastEditTime: 2024-05-10 20:36:50
 * @FilePath: \obj_system\src\views\order\Statistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/order/statistics' }">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/order/statistics' }">数据统计</el-breadcrumb-item>
        </el-breadcrumb>
        <div id="mainList" style="width: 50%;height:350px;padding-top:10px;float:left;" ref="mainList"></div>
        <div id="mainEval" style="width: 50%;height:350px;padding-top:10px;float:left;" ref="mainEval"></div>
        
        
        
        
    </div>
</template>

<script>
//引入
import * as echarts from 'echarts';
import axios from 'axios';

export default {
    name: "Statistics",
    data() {
        return {
            user_id: '',
            list: {
                keys: [],
                values: []
            },
            list_all: [],
            classArry: [],
            star: 0,
            starPesint: 0,  //平均评分
            chant: [],   //评分统计数据
            radChartData: [],
            basChartData: []
        }
    },

    created() {
        
        let getlocal = localStorage.getItem("localUser");
        this.user_id = JSON.parse(getlocal).user_id;
        this.classList();
        this.getCommit();
        axios.get("/merchant/list_all", {
            params: {
                user_id: this.user_id
            }
        })
            .then(
                res => {
                    this.list_all = res.data.data;
                    
                   
                    let list = this.splitObjectIntoKeysAndValues(this.list_all);
                    this.list.keys = list.keys;
                    this.list.values = list.values;
                    
                    this.initCh();
                    this.evalCh();
                   
                }
            )

       

    },
  
    methods: {
        classList() {
             axios.get("/goods/mer/list", {
                 params: {
                     user_id: this.user_id
                 }
            }).then(
                res => {
                  this.classArry = res.data.data;
                }
            )
        },
        //基础图表
        initCh() {//mainList
       
            var myChart = echarts.init(this.$refs.mainList);
            var option;

            option = {
                 title: {
                    text: '商品销量'
                },
                xAxis: {
                    type: 'category',
                    data: this.list.keys
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: ['销量']
                },
                series: [
                    {
                    data: this.list.values,
                    type: 'bar'
                    }
                ]
            };
            
            option && myChart.setOption(option);

        },
        //评分图表
        evalCh() {  //mainEval
            var evalChart = echarts.init(this.$refs.mainEval);
            var option;

            option = {
                title: {
                    text: '商品评分'
                },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: this.chant
                }
            ]
            }
             option && evalChart.setOption(option);
        },
       
      
        splitObjectIntoKeysAndValues(obj) {  
            const keys = [];  
            const values = [];  
        
            for (let key in obj) {  
                if (obj.hasOwnProperty(key)) {  
                    keys.push(key);  
                    values.push(obj[key]);  
                }  
            }  
        
            return {  
                keys: keys,  
                values: values  
            };  
        },

        getCommit() {
            axios.get('/merchant/comment', {
                params: {
                    merchant_id: this.user_id
                    //     userName: this.getUserName
                    }
                
                })
            .then(res => {
                let comment = res.data.data;
                
                let num = 0;
                res.data.data.map(val =>  num += Number(val.evaluate_height))
                this.star = ( num / res.data.data.length).toFixed(1);
                this.starPesint = Math.floor(this.star);  //评分
                let evalArr = [];
                for(let x = 1; x <=5; x++) {
                    let obj = {};
                    obj[x] = 0;
                    evalArr.push(obj);
                }
                for(let i of comment) {  //i.evaluate_height
                   evalArr[i.evaluate_height - 1][i.evaluate_height] = evalArr[i.evaluate_height - 1][i.evaluate_height] + 1
                    // console.log(evalArr[i.evaluate_height - 1][i.evaluate_height]);
                }

                //  [
                //     { value: 1048, name: 'Search Engine' },
                //     { value: 735, name: 'Direct' },
                //     { value: 580, name: 'Email' },
                //     { value: 484, name: 'Union Ads' },
                //     { value: 300, name: 'Video Ads' }
                // ]

                
                let chant = [];
                for(let y in evalArr) {
                    chant.push({
                        value: evalArr[y][Number(y)+ 1],
                        name: Number(y) + 1 + '分'
                    });
                }
                this.chant = chant;
                
            })
        }


        
    },
   
}
</script>

<style scoped>
#activeChart {
    margin-top: 30px;
    width: 100%;
    height: 270px;
}

.flexbox {
    width: 100%;
    display: flex;
}

#basChart {
    /* flex: 1; */
    width: 70%;
    height: 270px;
}

#radChart {
    /* flex: 3; */
    width: 30%;
    height: 270px;
}
</style>